<template>
  <div class="upload">
    <el-upload
      v-model:file-list="fileLists"
      :http-request="customUpload"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      multiple
    >
      <el-button type="primary" plain>上传附件</el-button>
      <template #tip>
        <div class="el-upload__tip">
          <!-- 仅限上传xls格式文件，且文件大小不超过5M。 -->
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps, watch } from 'vue'
  import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import { postActionUpload } from '@/api/requestEvents'

  interface UpladFile extends UploadUserFile {
    id?: string
    type?: string
  }
  const fileLists = ref<UpladFile[]>([])

  const props = defineProps<{
    fileList?: UpladFile[]
  }>()

  watch(
    () => props.fileList,
    (newval) => {
      fileLists.value = newval
    },
    { deep: true }
  )

  const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
  }

  // 文件上传前的检查
  const beforeUpload = (file: File) => {
    const isLt5M = file.size / 1024 / 1024 < 5
    if (!isLt5M) {
      ElMessage.error('上传文件大小不能超过 5MB!')
    }
    return isLt5M
  }

  const beforeRemove: UploadProps['beforeRemove'] = (
    uploadFile,
    uploadFiles
  ) => {
    return ElMessageBox.confirm(
      `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
      () => true,
      () => false
    )
  }

  const customUpload = async (options: any) => {
    const formData = new FormData()
    formData.append('file', options.file)
    try {
      // 调用 getFileUploadReturn 接口获取上传文件的返回信息
      const resUpload: any = await postActionUpload(
        '/infra/file/upload-return-obj',
        formData,
        options
      )
      if (resUpload.code === 0 && resUpload.data) {
        const fileItem = fileLists.value.find(
          (item) => item.uid === options.file.uid
        )
        if (fileItem) {
          fileItem.name = resUpload.data.name
          fileItem.url = resUpload.data.url
          fileItem.id = resUpload.data.id
          fileItem.type = resUpload.data.type
        }

        ElMessage.success('文件上传成功')
        emeit('upload:success', fileLists.value)
      } else {
        fileLists.value = fileLists.value.filter(
          (item) => item.uid !== options.file.uid
        )
      }
    } catch (error) {
      ElMessage.error('文件上传失败')
      console.error('文件上传失败', error)
      fileLists.value = fileLists.value.filter(
        (item) => item.uid !== options.file.uid
      )
    }
  }

  const emeit = defineEmits<{
    (e: 'upload:success', data: UpladFile[]): void
  }>()
</script>

<style scoped lang="scss">
  .upload-demo {
    position: relative;

    :deep(.el-upload-list) {
      display: flex;
    }

    :deep(.el-upload-list__item) {
      width: 390px;
    }

    :deep(.el-upload__tip) {
      position: absolute;
      left: 112px;
      top: 0;
      font-size: 12px;
      color: #00000040;
    }
  }
</style>
